<template>
  <div>
    <el-form ref="form" :model="form" label-width="120px" :inline="true">
        <el-form-item label="请选择投诉类型">
        <el-select size="small" v-model="form.type" placeholder="请选择投诉类型" clearable>
          <el-option v-for="type in businessType" :label="type.key" :value="type.value" :key="type.value" >
          </el-option>
        </el-select>
        <el-button
           
            plain
            @click="open1()" size="small">
            说明
        </el-button>

        </el-form-item>
        <el-form-item label="请输入投诉内容" size="small" clearable >
            <el-input v-model="form.content"></el-input>
        </el-form-item>
        <br>
        <el-form-item label="请输入投诉订单号" size="small" clearable>
            <el-input v-model="form.orderNo"></el-input>
        </el-form-item>
        <el-form-item label="请选择投诉图片">
            <el-upload
                        class="pop-upload"
                        ref="upload"
                        action=""
                        :file-list="fileList"
                        :auto-upload="false"
                        :multiple="true"
                        :on-exceed="max"
                        :on-change="handleChange"
                        :on-remove="handleRemove"
                        :limit="maxSize"
                >
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>

                </el-upload>
        </el-form-item>
        <br>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        url:"http://localhost:1011/business/",
        fileList: [],   // 定义一个空数组
        maxSize:3,
        businessType:[
            { key: '请选择投诉类型', value: 0 },
        ],
        form: {
            orderNo:'',
            type:0,
            content:'',
        },
       
       
            
        
            
        
      }
    },
    created() {
        this.getType()
    },
    methods: {
        open1() {
            const h = this.$createElement;
            if(this.form.type==0){
                this.$message({
                        message: '请选择类型再查看说明',
                        type: 'error'
                        });
                return;
            }
            this.$notify({
            title: this.businessType[this.form.type].key,
            message: h('i', { style: 'color: teal'}, this.businessType[this.form.type].desp)
            });
        },
        getType(){
            this.$axios.get(this.url+"findType").then(res=>{
                if(res.data.code==200){
                    let data= res.data.data
                   
                    for(let i in data){
                    this.businessType.push({"key":data[i].name,"value":data[i].type,"desp":data[i].desp})
                    
                }
                console.log(this.businessType);
                }
               
            }).catch()
        },
        max(){
        this.$message({
                    message: '只能上传三张图片',
                    type: 'error'
                });
        },
    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用,function(file, fileList)
        handleChange(file, fileList) {
            this.fileList = fileList
        },
        // 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。function(file, fileList)
        handleRemove(file, fileList) {
            this.fileList = fileList
        },
        onSubmit() {
            //判断是否有文件再上传
            if (this.fileList.length === 0) {
                return this.$message.warning('请选取文件后再提交')
            }
             if (this.form.type==0) {
                return this.$message.warning('请选取投诉类型再提交')
            }
            // 下面的代码将创建一个空的FormData对象:
            const formData = new FormData()
            // 你可以使用FormData.append来添加键/值对到表单里面；
            this.fileList.forEach((file) => {
                formData.append('file', file.raw)
               
            })
            formData.append("content",this.form.content);
            formData.append("orderNo",this.form.orderNo);
            formData.append("businessType",this.form.type);
            let  date = new Date()
            formData.append("createTime",date)
            formData.forEach(res=>{
                console.log(res);
            });
            this.$axios.post(this.url+"add",formData).then(res=>{
                let data = res.data.data
                console.log(data);
                this.$router.push({ path: '/complaint/lookBusiness' })
            }).catch()
        }
    }
  }
</script>